

<!-- 支付订单 -->
<template>
	<view class="app">
		
		<!-- header部分 -->
		<view class='header-Container header-height'>
			<view class="header-bg"></view>
			<navHeader pageTitle="在线支付" colorTheme="black" gotoNavBackCustom="1" @gotoNavBackCustomHandler="closeModalHandler">
			</navHeader>
		</view>
		
		<!-- 订单费用 -->
		<view class="totalFee-Container">
			<image class="logo" :src="icon.logo" mode=""></image>
			
			<view class="feeTime-Container">
				<view class="feeInfo">
					<text class="money-icon">￥</text>
					<text class="price-int">{{orderPayAmount / 100}}</text>
					<!-- <text class="price-float">.00</text> -->
				</view>
				<view class="timeInfo">
					请在{{leavePayTime}}内完成支付
				</view>
			</view>
		</view>

		<view class="pay-type-list">
			<!-- <view v-if="balanceFlag && crossBorderFlag != 1" class="type-item b-b" @click="changePayType(1)">
				<image class="payTypeIcon" :src="icon.balance" mode=""></image>
				<view class="con">
					<text class="tit">余额支付<text class="balance">(可用￥{{amountBalance / 100}})</text></text>
				</view>
				<image :src="icon.select" class="checkbox" v-if="payType == 1"></image>
				<image :src="icon.empty" class="checkbox" v-else></image>
			</view>
			<view v-else class="type-item b-b">
				<image class="payTypeIcon" :src="icon.balance_no" mode=""></image>
				<view class="con">
					<text class="tit balance_no">余额支付<text class="balance" v-if="amountBalance == 0">(无可用余额)</text><text class="balance" v-else>(可用余额不足)</text></text>
				</view>
			</view> -->
			<!-- #ifdef APP-PLUS -->
			<view v-if="crossBorderFlag != 1" class="type-item b-b" @click="changePayType(3)">
				<image class="payTypeIcon" :src="icon.alipay" mode=""></image>
				<view class="con">
					<text class="tit">支付宝支付</text>
					<text></text>
				</view>
				<image :src="icon.select" class="checkbox" v-if="payType == 3"></image>
				<image :src="icon.empty" class="checkbox" v-else></image>
			</view>
			<!-- #endif -->
			<view class="type-item" @click="changePayType(2)">
				<image class="payTypeIcon" :src="icon.wechat" mode=""></image>
				<view class="con">
					<text class="tit">微信支付</text>
					<text></text>
				</view>
				<image :src="icon.select" class="checkbox" v-if="payType == 2"></image>
				<image :src="icon.empty" class="checkbox" v-else></image>
			</view>
			
		</view>
		
		<!-- 支付 -->
		<view @click="gotoPayHandler" class="payBtn-Container">
			<text v-if="payType == 1">余额</text><text v-if="payType == 2">微信</text><text v-if="payType == 3">支付宝</text>支付<text>￥{{orderPayAmount / 100}}</text>
		</view>
		
		
		<!-- 支付密码 -->
		<view v-if="showPayPassFlag" class="payPassBg-Container">
			<view class="setPass-Container">
				<view class="modalTitle">
					请输入支付密码
				</view>
				
				<!-- 关闭弹窗 -->
				<image @click="closeModalHandler" :src="icon.closeModalBtn" class="closeModalBtn"></image>
				
				<view @tap="showFun" class="content">
					<view class="passwordBg-Container">
						<image class="password-bg" :src="icon.password" mode=""></image>
					</view>
					
					<view v-for="(item, index) in 6" :key="item" class="password-item">
						{{password[index] ? '●' :''}}
					</view>
				</view>
				
				<view class="forgetPass-Container">
					<view class="forgetPass">
						<view @click="gotoPayPassPage()">
							忘记密码？
						</view>
					</view>
				</view>
				
				<view class="confirmPayOuter-Container">
					<view @click="confirmPayHandler()" class="confirmPay-Container">
						确认支付
					</view>
				</view>
			</view>
			<pay-keyboard :show_key="show_key" @hideFun="hideFun" @getPassword="getPassword"></pay-keyboard>
		</view>
		
		
		<!-- 取消支付弹窗 -->
		<view v-if="showCancelPayFlag" class="cancelPayBg-Container">
			<view class="cancelPay-Container">
				<view class="modalTitle">
					确认要离开收银台？
				</view>
				
				<view @tap="showFun" class="content">
					订单已提交成功，超时未支付将会取消订单，请尽快完成支付。
				</view>
				
				<view class="btnsOuter-Container">
					<view @click="gotoOrderPage()" class="cancelBtn-Container">
						取消支付
					</view>
					<view @click="goonPayAgain()" class="goonPayBtn-Container">
						继续支付
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex';
	
	import navHeader from '@/components/nav-header/nav-header';
	import payKeyboard from '@/components/keyboard/keyboard'
	
	export default {
		components: {
			navHeader,
			payKeyboard
		},
		data() {
			return {
				icon: {
					logo: "/static/assets/logo2.png",
					balance: "/static/images/order/pay/balance.png",
					balance_no: "/static/images/order/pay/balance_no.png",
					wechat: "/static/images/order/pay/wechat.png",
					alipay: "/static/images/order/pay/alipay.png",
					
					password: "/static/images/order/pay/password.png",
					
					select: '/static/images/cart/sel.png',
					empty: '/static/images/cart/empty.png',
					
					closeModalBtn: "/static/images/common/closeModal.png",
				},
				
				//订单信息
				leavePayTime: "",
				orderParentId: "",
				orderIds: "",
				orderPayAmount: 0,
				balanceFlag: false,
				payType: 2,
				
				//支付密码
				amountBalance: 0,
				showPayPassFlag: false,
				show_key: false,
				password: '',
				
				showCancelPayFlag: false,
				
				
				//拼团支付验证信息
				orderType: 0,
				activityMainId: "",
				activityGroupId: "",
				
				
				// 跨境支付
				sweixin: '',
				crossBorderFlag: 0
			};
		},
		computed: {
			...mapState(['hasLogin', 'jsApiAppId', 'url'])
		},
		onLoad(options) {
			
			var that = this;
			
			// #ifdef APP-PLUS
			plus.share.getServices(function(s) {
				var shares = {};  
				for (var i = 0; i < s.length; i++) {  
					var t = s[i];  
					shares[t.id] = t; 
				}  
				
				var sweixin = shares['weixin'];  
				that.sweixin = sweixin;
			}, function(e){  
				console.log("获取分享服务列表失败："+e.message);  
			});  
			// #endif
			
			
			this.orderParentId = options.orderParentId;
			this.orderIds = options.orderIds;
			this.orderPayAmount = options.orderPayAmount || 0;
			
			this.getMyBalance(options.wxPayFlag);
		},
		onShow() {
			
			// #ifdef H5
			var code = sessionStorage.getItem("wxCode");
			if(code) {
				sessionStorage.removeItem("wxCode");
				this.jsApiPayCallback(code);
			}
			// #endif
		},
		methods: {
			
			//我的余额
			getMyBalance(wxPayFlag) {
				
				var that = this;
				that.$api.globalUtil.requestAjax({
					url: '/OrderApi/getOrderDetailByOrderIdsForApi',
					method: "POST",
					data: {
						orderParentId: that.orderParentId,
						orderIds: that.orderIds
					},
					success: function(res) {
						if(res.data.success) {
							
							var crossBorderFlag = res.data.response.orderForms[0].crossBorderFlag;
							that.crossBorderFlag = crossBorderFlag;
							that.leavePayTime = that.$api.globalUtil.leaveTimeFormat(res.data.response.leavePayTime);
							
							//拼团支付验证信息
							that.orderType = res.data.response.orderType;
							that.orderParentId = res.data.response.orderForms[0].orderParentId;
							that.activityMainId = res.data.response.activityMainId;
							that.activityGroupId = res.data.response.activityGroupId;
							
							that.$api.globalUtil.requestAjax({
								url: "/AccountBalanceApi/findAccountBalanceByCustomerIdForApi",
								method: "POST",
								success: function(res) {
									if(res.data.success) {
										
										var balance = res.data.response.moneyBalance || 0;
										that.amountBalance = balance;
										
										//微信支付 || 保税订单
										if(wxPayFlag == 1 || crossBorderFlag == 1) {
											that.payType = 2;
											
											if(balance > that.orderPayAmount) {
												that.balanceFlag = true;
											}else {
												that.balanceFlag = false;
											}
										}else {
											if(balance > that.orderPayAmount) {
												that.balanceFlag = true;
												that.payType = 2;
											}else {
												that.balanceFlag = false;
												that.payType = 2;
											}
										}
									}
								}
							});
						}
					}
				});
			},
			
			
			//选择支付方式
			changePayType(type) {
				this.payType = type;
			},
			
			
			//忘记密码
			gotoPayPassPage() {
				uni.navigateTo({
					url: '/pagesUser/payPass'
				});
			},
			
			
			//点击支付
			gotoPayHandler() {
				
				var that = this;
				if(that.orderType == 20) {
					
					that.$api.globalUtil.requestAjax({
						url: "/OrderApi/verifyGroupOrderForApi",
						method: "POST",
						data: {
							orderParentId: that.orderParentId,
							activityGroupMainId: that.activityMainId,
							activityGroupId: that.activityGroupId
						},
						success: function(res) {
							if(res.data.success) {
								gotoPayHandlerInner();
							}
						},
					});
				}else {
					gotoPayHandlerInner();
				}
				
				
				function gotoPayHandlerInner() {
						
					//余额支付
					if(that.payType == 1) {
						that.$api.globalUtil.requestAjax({
							url: "/CustomerApi/findCustomerByCustomerIdForApi",
							method: "POST",
							success: function(res) {
								if(res.data.success) {
									if(res.data.response.boundPayPwd) {
										that.showPayPassFlag = true;
									}else {
										that.$api.msg("请设置支付密码");
										setTimeout(function() {
											uni.navigateTo({
												url: '/pagesUser/payPass'
											})
										}, 2000);
									}
								}
							}
						});
					}else {
						that.confirmPayHandler();
					}
				}
			},
			
			//支付密码数字弹窗
			showFun(){
				this.show_key = true;
			},
			hideFun(){
				this.show_key = false;
			},
			getPassword(n){
				this.password = n;
			},
			
			
			// 取消支付弹窗
			closeModalHandler() {
				this.showPayPassFlag = false;
				this.showCancelPayFlag = true;
			},
			gotoOrderPage() {
				uni.setStorageSync('orderStatus', "02");
				uni.redirectTo({
					url: '/pages/order/order'
				});
			},
			goonPayAgain() {
				this.showPayPassFlag = false;
				this.showCancelPayFlag = false;
				
				this.gotoPayHandler();
			},
			
			
			// 确认支付
			confirmPayHandler() {
				
				//余额支付
				if(this.payType == 1) {
					this.amountBalancePay();
				}
				
				//微信|支付宝支付
				if(this.payType == 2 || this.payType == 3) {
					this.wxpayOrAlipayHandler();
				}
			},
			
			
			// 账户余额支付
			amountBalancePay() {
				
				if(this.password.length < 6) {
					this.$api.msg("请输入6位支付密码");
					return ;
				}
				
				var that = this;
				that.$api.globalUtil.requestAjax({
					url: "/PayApi/payForApi",
					method: "POST",
					data: { 
						orderParentId: that.orderParentId,
						orderIds: that.orderIds,
						payPassword: that.password
					},
					success: function(res) {
						if(res.data.success) {
							that.$api.msg("支付成功");
							
							uni.redirectTo({
								url: '/pagesOrder/successCoupon?orderParentId='+that.orderParentId+'&orderIds='+that.orderIds
							});
						}
					},
				});
			},
			
			
			// 微信|支付宝支付
			wxpayOrAlipayHandler() {
				
				// #ifdef MP-WEIXIN
				this.miniAppPay_fun();
				// #endif
				
				// #ifdef APP-PLUS
				if(this.payType == 2) {
					this.wxAppPay_fun();
				}
				if(this.payType == 3) {
					this.aliAppPay_fun();
				}
				// #endif
				
				// #ifdef H5
				this.jsApiPay_fun();
				// #endif
			},
			
			
			//小程序支付
			miniAppPay_fun() {
				
				var that = this;
				uni.login({
					provider: 'weixin',
					success: function (res) {
						
						var tradeType = "MINAPI";
						var code = res.code;
						
						that.$api.globalUtil.requestAjax({
							url: "/PayApi/wxPayForApi",
							method: "POST",
							data: { 
								orderParentId: that.orderParentId,
								tradeType: tradeType,
								code: code
							},
							success: function(res) {
								
								if(res.data.success) {
									
									var pay = res.data.response;
									uni.requestPayment({
										_debug: true,
										provider: "wxpay",
										orderInfo: "orderId="+that.orderId,
										timeStamp: ""+pay.timestamp,
										nonceStr: pay.nonceStr,
										package: "prepay_id="+pay.prepayId,
										signType: pay.signType,
										paySign: pay.paySign,
										success: function(res) {
											that.$api.msg("支付成功");
											
											uni.redirectTo({
												url: '/pagesOrder/successCoupon?orderParentId='+that.orderParentId+'&orderIds='+that.orderIds
											});
										},
										fail: function(err) {
											that.$api.msg("支付失败");
											that.gotoOrderPage()
										}
									});
								}
							},
						});
					},
					fail(err) {
						that.$api.msg(JSON.stringify(err) || "登录失败");
					}
				});
			},
			
			
			//微信APP支付
			wxAppPay_fun() {
				
				var that = this;

				//跨境商品
				if(that.crossBorderFlag == 1) {
					
					// id: (String 类型 )微信小程序ID
					// path: (String 类型 )微信小程序打开的页面路径
					// type: (Number 类型 )微信小程序版本类型-可取值： 0-正式版； 1-测试版； 2-体验版。 默认值为0。
					// webUrl: (String 类型 )兼容低版本的网页链接
					that.sweixin.launchMiniProgram({  
						id: 'gh_e9cc525f0996',
						type: 0,
						path: '/pages/index/miniAppPay?orderParentId='+that.orderParentId
					});  
				}else {
					var tradeType = "APP";
					that.$api.globalUtil.requestAjax({
						url: "/PayApi/wxPayForApi",
						method: "POST",
						data: { 
							orderParentId: that.orderParentId,
							tradeType: tradeType
						},
						success: function(res) {
							
							if(res.data.success) {
								
								var pay = res.data.response;
								var orderInfo = {
									appid: pay.appid,  
									noncestr: pay.nonceStr,  
									package: 'Sign=WXPay',
									partnerid: pay.partnerid,  
									prepayid: pay.prepayId,  
									timestamp: ""+pay.timestamp,  
									sign: pay.paySign
								};
								
								uni.requestPayment({
									_debug: true,
									provider: "wxpay",
									orderInfo: orderInfo,
									success: function(res) {
										that.$api.msg("支付成功");
										uni.redirectTo({
											url: '/pagesOrder/successCoupon?orderParentId='+that.orderParentId+'&orderIds='+that.orderIds
										});
									},
									fail: function(err) {
										that.$api.msg("支付失败");
										that.gotoOrderPage()
									}
								});
							}
						},
					});
				}
			},
			
			
			//支付宝App支付
			aliAppPay_fun() {
				
				var that = this;
						
				var tradeType = "APP";
				that.$api.globalUtil.requestAjax({
					url: "/PayApi/alipayAppForApi",
					method: "POST",
					data: { 
						orderParentId: that.orderParentId,
						orderIds: that.orderIds,
						aliPayWap: "NO",
						aliPayApp: "YES"
					},
					success: function(res) {
						
						console.log("支付宝支付="+JSON.stringify(res.data.response));
						
						if(res.data.success) {
							
							var pay = res.data.response;
							
							uni.requestPayment({
								_debug: true,
								provider: "alipay",
								orderInfo: pay,
								success: function(res) {
									that.$api.msg("支付成功");
									uni.redirectTo({
										url: '/pagesOrder/successCoupon?orderParentId='+that.orderParentId+'&orderIds='+that.orderIds
									});
								},
								fail: function(err) {
									that.$api.msg("支付失败");
									that.gotoOrderPage()
								}
							});
						}
					},
				});
			},
			
			
			//JSAPI支付
			jsApiPay_fun() {
				
				sessionStorage.setItem("backUrl", "/pagesOrder/pay?wxPayFlag=1&orderParentId="+this.orderParentId+"&orderPayAmount="+this.orderPayAmount+"&orderIds="+this.orderIds);
				
				
				//获取code
				var APPID = this.jsApiAppId;
				var REDIRECT_URI = encodeURIComponent(this.url + "jsApiPay.html", "UTF-8");
				var getCodeUrl = "https://open.weixin.qq.com/connect/oauth2/authorize?appid="+APPID+"&redirect_uri="+REDIRECT_URI+"&response_type=code&scope=snsapi_base&state=STATE#wechat_redirect";
				window.location.replace(getCodeUrl);
			},
			jsApiPayCallback(code) {
				
				var that = this;
				if (typeof WeixinJSBridge == "undefined"){
				   if( document.addEventListener ){
				       document.addEventListener('WeixinJSBridgeReady', onBridgeReady, false);
				   }else if (document.attachEvent){
				       document.attachEvent('WeixinJSBridgeReady', onBridgeReady); 
				       document.attachEvent('onWeixinJSBridgeReady', onBridgeReady);
				   }
				}else {
					onBridgeReady();
				}
				
				//拉起支付
				function onBridgeReady() {
					
					getWxPayInfo(function(pay) {
						WeixinJSBridge.invoke(
							'getBrandWCPayRequest', {
								"appId": pay.appId,     		//公众号名称，由商户传入     
								"timeStamp": pay.timeStamp,     //时间戳，自1970年以来的秒数     
								"nonceStr": pay.nonceStr, 		//随机串     
								"package": pay.package,     
								"signType": pay.signType,       //微信签名方式：     
								"paySign": pay.paySign 			//微信签名 
							},
							function(res) {
								if(res.err_msg == "get_brand_wcpay_request:ok") {
									// 使用以上方式判断前端返回,微信团队郑重提示：
									//res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。
									that.$api.msg("支付成功");
									uni.redirectTo({
										url: '/pagesOrder/successCoupon?orderParentId='+that.orderParentId+'&orderIds='+that.orderIds
									});
								} 
							}
						); 
					});
				}
				
				
				//支付信息
				function getWxPayInfo(callBack) {
					
					var tradeType = "JSAPI";
					that.$api.globalUtil.requestAjax({
						url: "/PayApi/wxPayForApi",
						method: "POST",
						data: { 
							orderParentId: that.orderParentId,
							tradeType: tradeType,
							code: code
						},
						success: function(res) {
							
							if(res.data.success) {
								
								var pay = res.data.response;
								
								var orderInfo = {
									appId: pay.appid,  
									timeStamp: ""+pay.timestamp,
									nonceStr: pay.nonceStr,  
									package: 'prepay_id='+pay.prepayId,
									signType: pay.signType,
									paySign: pay.paySign
								};
								
								callBack(orderInfo);
							}
						},
					});
				}
			}
		}
	}
</script>

<style lang='scss'>
	page{
		background: #F5F5F5;
	}
	
	/* header部分 */
	.header-Container {
		z-index: 99;
		position: relative;
		width: 100%;
		height: 176rpx;
		overflow: hidden;
		box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.08);
		background: rgba(255, 255, 255, 1);
		
		.header-bg {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background:rgba(255,255,255,1);
		}
	
		.leftBtns {
			display: flex;
			align-items: center;
			justify-content: flex-start;
			position: absolute;
			bottom: 0;
			width: 100%;
			height: 86rpx;
	
			.back {
				margin-left: 17rpx;
				width: 44rpx;
				height: 44rpx;
			}
		}
	
		.title {
			position: absolute;
			bottom: 0;
			width: 100%;
			height: 86rpx;
			line-height: 86rpx;
			text-align: center;
			font-size: 36rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: rgba(51, 51, 51, 1);
		}
	}
	
	/* 订单费用 */
	.totalFee-Container {
		display: flex;
		align-items: center;
		position: relative;
		width: 100%;
		height: 225rpx;
		background:rgba(255,255,255,1);
		border-radius:0px 0px 16rpx 16rpx;
		
		.logo {
			position: absolute;
			left: 48upx;
			bottom: 30upx;
			width: 166upx;
			height: 130upx;
		}
		
		.feeTime-Container {
			display: flex;
			flex-direction: column;
			align-items: flex-start;
			position: absolute;
			width: 100%;
			text-align: center;
			
			.feeInfo {
				position: relative;
				box-sizing: border-box;
				display: inline-block;
				width: 100%;
				height: 50rpx;
			
				.money-icon {
					font-size:32rpx;
					font-family:PingFang SC;
					font-weight:500;
					color:#FE5E49;
				}
				
				.price-int {
					font-size:50rpx;
					font-family:PingFang SC;
					font-weight:500;
					color:#FE5E49;
				}
				
				.price-float {
					font-size:32rpx;
					font-family:PingFang SC;
					font-weight:500;
					color:#FE5E49;
				}
			}
			
			.timeInfo {
				margin-top: 25rpx;
				width: 100%;
				font-size:22rpx;
				font-family:PingFang SC;
				color:rgba(153,153,153,1);
				line-height:30rpx;
			}
		}
	}

	/* 支付方式 */
	.pay-type-list {
		margin-top: 20rpx;
		width: 100%;
		/* height:250rpx; */
		background:rgba(255,255,255,1);
		border-radius:16rpx;
		
		.type-item{
			height: 124rpx;
			padding: 0 40rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			position:relative;
		}
		
		.icon{
			width: 100upx;
			font-size: 52upx;
		}
		.icon-erjiye-yucunkuan {
			color: #fe8e2e;
		}
		.icon-weixinzhifu {
			color: #36cb59;
		}
		.icon-alipay {
			color: #01aaef;
		}
		.tit{
			font-size:30rpx;
			font-family:PingFang SC;
			color:rgba(51,51,51,1);
			
			&.balance_no {
				color:rgba(153,153,153,1);
			}
		}
		.con{
			flex: 1;
			display: flex;
			flex-direction: column;
			font-size: $font-sm;
			color: $font-color-light;
		}
	}
	.mix-btn {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 630upx;
		height: 80upx;
		margin: 80upx auto 30upx;
		font-size: $font-lg;
		color: #fff;
		background-color: $base-color;
		border-radius: 10upx;
		box-shadow: 1px 2px 5px rgba(219, 63, 96, 0.4);
	}
	
	.b-b::after {
		left: 30rpx;
	    right: 30rpx;
	}
	.payTypeIcon {
		margin-right: 20rpx;
		width: 44rpx;
		height: 44rpx;
	}
	.balance {
		display: inline-block;
		margin-left: 20rpx;
		color: #999999;
	}
	
	/* 单选按钮 */
	.checkbox {
		height: 36rpx;
		width: 36rpx;
	}


	/* 支付 */
	.payBtn-Container {
		margin: 0 auto;
		margin-top: 200rpx;
		width:600rpx;
		height:90rpx;
		line-height:90rpx;
		background:#FE5E49;
		border-radius:45rpx;
		text-align: center;
		font-size:34rpx;
		font-family:PingFang;
		// font-weight:500;
		color:rgba(255,255,255,1);
	}
	
	
	/* 支付密码 */
	.payPassBg-Container {
		display: flex;
		align-items: center;
		justify-content: center;
		position: fixed;
		top: 0;
		left: 0;
		width: 100vw;
		height: 100vh;
		background:rgba(0,0,0,0.7);
		
		
		/* 设置密码 */
		.setPass-Container {
			position: fixed;
			bottom: 520rpx;
			left: 75rpx;
			width: 600rpx;
			height: 478rpx;
			background-color: #FFFFFF;
			border-radius:16rpx;
			
			/* 弹窗标题 */
			.modalTitle {
				margin-top: 50rpx;
				margin-bottom: 75rpx;
				width: 100%;
				height:30rpx;
				line-height:30rpx;
				text-align: center;
				font-size:30rpx;
				font-family:PingFang SC;
				// font-weight:bold;
				color:rgba(51,51,51,1);
			}
			
			/* 关闭按钮 */
			.closeModalBtn {
				z-index: 99999;
				position: absolute;
				top: 36rpx;
				right: 36rpx;
				width: 25rpx;
				height: 24rpx;
			}
			
			.content {
				position: relative;
				display: flex;
				align-items: flex-start;
				justify-content: center;
				width: 100%;
				height: 90rpx;
				
				.passwordBg-Container {
					display: flex;
					justify-content: center;
					position: absolute;
					top: 0;
					left: 0;
					width: 100%;
					height: 90rpx;
					
					.password-bg {
						width: 535rpx;
						height: 90rpx;
					}
				}
				
				.password-item {
					position: relative;
					width: 90rpx;
					height: 90rpx;
					line-height: 90rpx;
					text-align: center;
					font-size:60rpx;
					font-family:PingFang;
					color:#333333;
					
					/* &.borderOneRpx:after {
						border-width: 4rpx;
						border-color: rgba(238,238,238,1);
						border-radius: 5rpx;
					} */
				}
			}
			
			/* 忘记密码 */
			.forgetPass-Container {
				display: flex;
				align-items: center;
				justify-content: center;
				position: absolute;
				bottom: 170rpx;
				width:100%;
				
				.forgetPass {
					width:544rpx;
					height:40rpx;
					line-height: 70rpx;
					text-align: right;
					font-size:20rpx;
					font-family:PingFang SC;
					color:#FE5E49;
					line-height:40rpx;
				}
			}
			
			/* 确认支付 */
			.confirmPayOuter-Container {
				display: flex;
				align-items: center;
				justify-content: center;
				position: absolute;
				bottom: 70rpx;
				width:100%;
				height:70rpx;
				
				.confirmPay-Container {
					width:544rpx;
					height:70rpx;
					line-height: 70rpx;
					text-align: center;
					font-size:28rpx;
					font-family:PingFang SC;
					/* font-weight:500; */
					color:rgba(255,255,255,1);
					background:#FE5E49;
					border-radius:35rpx;
				}
			}
		}
	}
	
	
	/* 取消支付弹窗 */
	.cancelPayBg-Container {
		display: flex;
		align-items: center;
		justify-content: center;
		position: fixed;
		top: 0;
		width: 100vw;
		height: 100vh;
		background:rgba(0,0,0,0.7);
		
		.cancelPay-Container {
			position: relative;
			width: 600rpx;
			height: 378rpx;
			background-color: #FFFFFF;
			border-radius:16rpx;
			
			/* 弹窗标题 */
			.modalTitle {
				margin-top: 50rpx;
				margin-bottom: 55rpx;
				width: 100%;
				height:30rpx;
				line-height:30rpx;
				text-align: center;
				font-size:30rpx;
				font-family:PingFang SC;
				// font-weight:bold;
				color:rgba(51,51,51,1);
			}
			
			.content {
				margin: 0 auto;
				width: 460rpx;
				font-size:26rpx;
				font-family:PingFang SC;
				/* font-weight:500; */
				color:rgba(51,51,51,1);
				line-height:36rpx;
			}
			
			/* 底部按钮 */
			.btnsOuter-Container {
				display: flex;
				justify-content: space-between;
				position: absolute;
				bottom: 0;
				padding: 0 70rpx;
				width: 100%;
				height: 140rpx;
				
				.cancelBtn-Container {
					width:210rpx;
					height:70rpx;
					line-height: 70rpx;
					background:rgba(255,255,255,1);
					border:1rpx solid #FE5E49;
					text-align: center;
					font-size:30rpx;
					font-family:PingFang SC;
					color:#FE5E49;
					background:rgba(255,255,255,1);
					border-radius:35rpx;
				}
				
				.goonPayBtn-Container {
					width:210rpx;
					height:70rpx;
					line-height:70rpx;
					background:#FE5E49;
					border-radius:35rpx;
					text-align: center;
					font-size:30rpx;
					font-family:PingFang SC;
					color:rgba(255,255,255,1);
				}
			}
		}
	}
</style>




